[nuxtjs] PostCSS 설치 및 사용하기

필수가 되버린 프론트엔드 NodeJS 환경에서 css를 위해서 다양한 것들이 사용되는데 그 중에서도 아래의 것은 대부분의 프로젝트에서 많이 사용되고 있습니다.

하나. css 전처리기 sass/scss, less 또는 stylus
둘. PostCSS 자바스크립트 트랜스파일러


여기서 PostCSS에 대하여 간략하게 알아보고 NuxtJS 환경에서 사용하는 패키지의 설치 방법과 설정에 대하여 간략하게 알아보겠습니다. 먼저 postcss는 무엇이고 왜 사용할까요?

# PostCSS는?

PostCSS는 자바스크립트를 사용한 트랜스파일링 도구로 유용한 몇 가지 기능을 수행합니다. css 속성에 필요한 prefix를 추가하거나 최신 문법(modern syntax)으로 변경하기도 하고 잘못된 사용 등의 Lint 기능도 가지고 있어 직접 또는 다른 패키지의 디펜던시로 사용되고 있죠. 매우 유용하다는 것을 알 수 있죠. 그럼 간략하게 정리하면 ...

• 필요한 prefix를 추가
• 최신 문법을 적용(modern syntax)
• 잘못된 사용 등의 Lint 기능

참고로 postcss를 npmjs.com를 통해 패키지 현황을 확인해보면 최근 주간 다운로드 수가 무려 6500만이 넘습니다. 아래는 nuxtjs를 사용하는 경우 설치 방법과 nuxt에서 사용하기 위한 config 설정 방법입니다.

! nuxtjs PostCSS 설치 및 사용하기

nuxtjs에서 PostCSS를 설치하기 위해서 @nuxt/postcss8 모듈을 사용합니다. 이 모듈 역시 다운로드 수가 십만이 넘는군요 설치를 위해서 아래의 명령어를 입력합니다.

설치가 완료되었다면 이제 nuxt.config.css 파일을 열고 buildModules에 해당 모듈을 추가하도록 합니다. 이 외에 다른 설정은 없습니다. 

@ nuxt.config.css

모듈 설치가 완료되었습니다. 이제 nuxtjs에서 PostCSS를 사용할 수 있게되었습니다.


최근 PostCSs를 설치하게 된 이유가 있는데 nuxtjs가 업데이트 된 후 PostCSS 관련 경고가 발생하게 되었습니다. 경고 문구 내용은 다음과 같았습니다.

"WARN You did not set any plugins, parser, or stringifier. Right now, PostCSS d
oes nothing. Pick plugins for your case on https://www.postcss.parts/ and use th
em in postcss.config.js."

경고 문구가 발생할뿐 앱 구동에는 문제가 없었지만 계속되는 warning 문구에 postcss를 결국 설치하게 되었습니다. 어려운 과정은 아니므로 가장 빠른 해결방법이었죠. 설치 후 설정을 마치니 경고 문구가 사라지고 좀 더 편안한 개발이 가능했습니다.



여기까지 PostCSS에 대하여 간략하게 알아보고 nuxtjs 환경의 설치 및 설정 방법도 함께 알아보았습니다!